<template>
  <div>
    <div class="item" v-for="(item,vals) in data" :key="vals">
      <router-link :to="`/list/${item.id}`">
      <div class="left">
        <img :src="item.img" @click.stop.prevent="imgPreview(item.img)">
      </div>
      <div class="right">
        <div class="title"> {{item.title}}</div>
        <div class="info">
          <span>{{item.price}}元</span>
          <i class="cubeic-add" @click.stop.prevent="addCart($event,item)"> </i>
        </div>
      </div>
      </router-link>

    </div>
  </div>
</template>

<script>
export default {
  props: ['data'],
  methods: {
    addCart (event, item) {
      this.$store.commit('addCart', item)
      this.$emit('addCart', event.target)
    },
    imgPreview (img) {
      this.$createImagePreview({
        imgs: [img, img]
      }).show()
    }
  }
}

</script>
<style lang="stylus" scoped>
.item
  padding 10px
  .left
    float left
    width 100px
    img
      width 100%
  .right
    float right
    .title
      padding-bottom 10px
    .info
      text-align right
      color #666
      .cubeic-add
        font-size 20px
  a
    zoom 1
  a:after
    display:block
    clear:both
    content:""
    visibility:hidden
    height:0
</style>
